<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./layer-v3.1.1/layer/layer.js"></script>

    <script src="layui/layui.all.js"></script>

</head>

<body>
    
    <input type="button" value="弹出窗口" onclick="openWindow()" />
    <div>
        <ul class="layui-timeline">
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis"></i>
              <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）</div>
              </div>
            </li>
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis"></i>
              <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>
              </div>
            </li>
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis"></i>
              <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">2016年，layui 首个版本发布</div>
              </div>
            </li>
            <li class="layui-timeline-item">
              <i class="layui-icon layui-timeline-axis"></i>
              <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">2015年，layui 孵化</div>
              </div>
            </li>
            <li class="layui-timeline-item">
              <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
              <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
              </div>
            </li>
          </ul>
    </div>
    <script>
        var _layer = null
        function openWindow() {
            _layer = layer.open({
                type: 2,
                title: '总经理信箱',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['1600px', '800px'],
                content: 'http://localhost:8080/index.html#/?id=00011'
            });
        }

        function closeWindow() {
            _layer.close()
        }
        window.addEventListener('message', function(e) {
            layer.close(_layer)
        }, false);
        
    </script>
</body>

</html>